<template>
    <div :class="[
        record.className.display, 
        record.className.backGroundColor, 
        record.className.justifyContent, 
        record.className.alignContent, 
        record.className.justifyItems, 
        record.className.alignItems, 
        record.className.margin, 
        record.className.marginTop, 
        record.className.marginRight, 
        record.className.marginBottom, 
        record.className.marginLeft, 
        record.className.padding,
        record.className.paddingTop, 
        record.className.paddingRight, 
        record.className.paddingBottom, 
        record.className.paddingLeft, 
        record.className.borderWidth,
        record.className.borderWidthTop,
        record.className.borderWidthRight,
        record.className.borderWidthBottom,
        record.className.borderWidthLeft,
        record.className.borderStyle,
        record.className.borderColor,
        record.className.borderRadius,
        record.className.borderColorTop,
        record.className.borderColorRight,
        record.className.borderColorBottom,
        record.className.borderColorLeft,
        record.className.spaceX,
        record.className.spaceY,
        record.className.wrap,
        record.className.shadow,
        record.className.shadowColor,
    ]">
        <div :class="[
            record.className.fontSize,
            record.className.color,
        ]" class="flex items-center">
            {{ record.className.title }}
        </div>
        <div v-if="record.className.headExtra">
            456
        </div>
    </div>
</template>

<script>
export default {
    props: {
        record: {
        type: Object,
        required: true
        },
        // selectItem: {
        // type: Object,
        // required: true
        // },
        // config: {
        // type: Object,
        // required: true
        // },
        // startType: {
        // type: String,
        // required: true
        // },
        // insertAllowedType: {
        // type: Array,
        // required: true
        // },
        // hideModel: {
        // type: Boolean,
        // default: false
        // }
    },
}
</script>

<style>

</style>